@import "app.scss";

.personcenter-warp {
  width: 100vw;
  height: 100vh;
  background-image: linear-gradient(180deg, #b4dafe 0%, #fff 100%);
  padding: 0 r(16);
  font-size: 12px;
  .info-warp {
    margin-bottom: r(12);
    .left-warp {
      .avatar {
        button {
          padding: 0;
          padding-right: r(10);
        }
        .btn {
          background-color: transparent;
          .img {
            width: r(44);
            height: r(44);
            border-radius: 50%;
          }
          &::after {
            border: none;
          }
        }
      }
      .info {
        .top {
          .name {
            font-size: 15px;
            font-weight: 700;
          }
          .role {
            display: flex;
            align-items: center;
            margin-left: r(6);
            border-radius: r(100);
            color: #fff;
            padding: 0 r(4);
            font-size: 10px;
            background: #3c72fc;
          }
        }
        .bottom {
          font-size: 12px;
          color: #444;
        }
      }
    }
    .right-warp {
      font-size: 12px;
      color: #444;
      .van-icon {
        color: #444 !important;
      }
    }
  }
  .content {
    width: 100%;
    overflow-y: scroll;
    .card {
      width: r(343);
      background-color: #fff;
      border-radius: r(5);
      padding: r(12);
      .top-warp {
        .title {
          font-size: 15px;
          font-weight: 700;
        }
        .subtitle {
          color: #4c7dfd;
          margin-left: r(12);
        }
      }
      .content-warp {
        padding: r(18) 0 r(12);
        .item {
          flex: 1;
          .num {
            font-size: 20px;
          }
          .name {
            margin-top: r(8);
            font-size: 12px;
          }
        }
        .carditem-warp {
          width: r(150);
          height: r(93);
          background-image: linear-gradient(90deg, #e5eff8 0%, #cfdfff 100%);
          padding: r(12) 0 r(12) r(12);
          border-radius: r(5);
          .img-warp {
            width: r(66);
            height: r(61);
            margin-top: r(16);
            .img {
              width: 100%;
              height: 100%;
            }
          }
        }
      }
      .footer {
        width: 100%;
        text-align: end;
        color: #4d7eeb;
      }
    }
    .cell-warp {
      width: 100%;
      border-radius: 5px;
      background-color: #fff;

      margin-top: r(8);
      color: #000;
    }
  }
}
